<template>
	<view class="content">
		<!-- <view class="u-f u-f-ac u-f-ajc u-f-jsb topmain">
			<image class="tximg" :src="userInfo.portrait || '/static/missing-face.png'" mode="aspectFill" ></image>
			<view class="u-f3 tsis">
				<view class="">{{ userInfo.nickname || '游客' }}</view>
				<view class="ytse">
					<text class="mas1">{{urerdata.isrz==2?'实名认证':'未认证'}}</text>
					<text>{{urerdata.Groupname}}</text>
				</view>
			</view>
			<view class="spts">
				<view class="">ID:{{urerdata.id?urerdata.id:''}}</view>
				<view class="">开通会员</view>
			</view>
		</view>
		<view class="u-f u-f-ac u-f-ajc u-f-jsb djxis">
			<view class="">刷新道具：0个 <text class="gmsx">购买</text></view>
			<view class="">保证金<uni-text data-v-64ebd2d9="" class="cell-more yticon icon-you"><span></span></uni-text></view>
		</view>
		<view class="fbboxs u-f u-f-ac u-f-ajc u-f-jsb">
			<view class="">余额：<text class="yesun">{{urerdata.money?urerdata.money:'0'}}</text></view>
			<view class="bsk2"><text>充值</text> <text>提现</text></view>
		</view> -->
		<view class="">
			<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>
		</view>
		<view class="" >
			<view class="wdyf-order" >
				<block v-for="(value,key) in listData" :key="key">
					<view class="wdyf-list" :class="value.status=='hidden'?'wdyf-lista':''"   hover-class="wdyf-atv" >
						<text v-if="value.status=='hidden'" style="border-radius:6upx; background: #ddd; color: #666; float: right; position: absolute; right: 10upx; margin-top: -30upx;" class="titles2">已暂停</text>
						<text class="titles3">{{value.goods_name}}</text>
						<view class="titles">
							<text class="titles1">{{value.type}}</text>
							<text class="titles2">{{value.pay_time==0?'未付款':'已付款'}}</text>
							<text class="titles2">ID:{{value.goods_id}}</text>
							<text class="titles4">单价￥{{value.shop_price}}</text>
							<text style="margin-left:1rem;color:red" @click="tuikiuan(value.goods_id)">申请退款</text>
						</view>
						<view class="imgbxo">
							<view class="imgbxonr" style="margin-top: 20upx;">
								<image :src="value.original_img" mode="aspectFill" lazy-load></image>
							</view>
							<view class="wdyf-nr">
								<view class="u-f u-f-ajc u-f-jsb msis"></view>
								<view @tap.stop="shenghe(value.goods_id)" class="u-f u-f-ajc u-f-jsb msis" style="margin-top: 20upx;">
									<text class="qqys" style="width: 32%; text-align: center; font-size: 10px; background: #fff; color: #666; border: 1px solid #ddd; padding:10upx; border-radius: 10upx;">剩余{{value.store_count}}个</text>
									<text style="width: 32%; text-align: center; font-size: 10px; background: #fff; color: #666; border: 1px solid #ddd; padding:10upx; border-radius: 10upx;">{{value.yijing}}人已赚</text>
									<text style="width: 32%; text-align: center; font-size: 10px; background: #fff; color: #666; border: 1px solid #ddd; padding:10upx; border-radius: 10upx;" class="qqys">待审{{value.shenhe}}个</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
<!-- 		<view class="no-nr" v-if="tabIndex==1||tabIndex==2">
			<view class="nothing">
				<image src="/static/nothing.png" mode="widthFix"></image>
			</view>
		</view> -->
		
		<!-- 选择类型发布 -->
		<view>
			<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer('right')" >
				<scroll-view :scroll-top="scrollTop" scroll-y="true"  class="scroll-Y" style="padding-bottom: 70px;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view style="clear: both;"></view>
				<view class="addtitleks">
					请选择任务类型
				</view>
				<view class="tplist" >
					<block v-for="(value,key) in type" :key="key">
						<button class="onzzTapasd" @tap="upontap(value.name)">{{value.name}}</button>
					</block>
				</view>
				<view style="clear: both;"></view>
				</scroll-view>
				<view class="u-f u-f-r" style="width: 100%; position: fixed; bottom: 15px;">
					<button class="onzzTap" type="primary" @tap="onzzTap()">取消</button>
				</view>
			</uni-drawer>
		</view> 
	</view>
</template>


<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import swiperTabHead from "components/user/swiper-tab-headw.vue";
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
import util from '@/components/amap-wx/js/util.js'
import uniIcon from '@/components/uni-icon/uni-icon.vue'
import {mapState} from 'vuex';//请求数据 mapState
export default {
	components: {
		swiperTabHead,
		uniDrawer,
		util,
		uniIcon
	},
	data() {
		return {
			//导航
			swiperheight: 500,
			tabIndex: 0,
			tabBars: [{
					name: "进行中",
					id: "dzf"
				},
				{
					name: "未上线",
					id: "all"
				},
				{
					name: "已结束",
					id: "yzf"
				}
			],
			//选择类型
			scrollTop: 0,
			type: [],
			urerdata:[],
			old: {
				scrollTop: 0
			},
			showRigth: false,
			showLeft: false,
			
			listData: [],
			reload: true,
			last_id: 0,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
		};
	},
	onLoad() {
	  this.type=uni.getStorageSync("config").fenlei
	  //console.log(this.type)
	  
	},
	onShow() {
		//ongrzlTap();
		this.getList();
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])//第一个值判断是否登录，第二个是用登录成功用户基本信息
	},
	onReachBottom() {
		this.status = 'more';
		this.getList();
	},
	methods: {
		shenghe(id){
			uni.navigateTo({
				url: `/pages/user/task/tasksh?id=${id}`
			})
		},
		// tabbar点击事件
		tabtap(index) {
			this.tabIndex = index
			this.listData=[];
			this.status = 'more';
			this.last_id=0;
			this.getList();
		},
		tuikiuan(id){
		var that=this;
		uni.showModal({
			title: '提示',
			content: '确定退款吗？',
			success: function (res) {
				if (res.confirm) {
					uni.login({
					  provider: 'weixin',
					  onlyAuthorize:'true',
					  success: function (loginRes) {
						 
					    const code = loginRes.code;
						 console.log(code)
					    let data = {};
					    data.token = uni.getStorageSync("userInfo").token;
					    data.uid = uni.getStorageSync("userInfo").id;
					    data.code=code;
						data.goods_id=id;
					    uni.request({
					    	url: that.$serverUrl + '/index.php/Mobile/index/tuikuan',
					    	data: data,
					    	success: res =>{
					    		console.log(res)
					    		if(res.data.status==200){
					    			this.money=0;
					    			
					    		}else{
					    			this.$api.msg('获取失败');
					    			this.logining = false;
					    		}
					    	},
					    	fail: (data, code) => {
					    		//console.log('fail' + JSON.stringify(data));
					    	}
					    });	
					    // 调用后端接口，发送 code 到服务端
					    // 后端通过 code 调用微信开放平台的接口，获取 Session Key 和 OpenID
					    // 并返回给前端
					  },
						  
					  fail: function (error) {	  
				     console.log(error)	
					  }
					});
				
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});	
	
		},
		getList() {
			let data = {
				//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
			};
			var limit=10;
			if (this.last_id>0) {
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				data.offset = this.last_id*limit;
				data._ = new Date().getTime() + '';
			}
			data.limit=limit
			data.tabIndex=this.tabIndex			
			data.token = uni.getStorageSync("userInfo").token;
			data.uid = uni.getStorageSync("userInfo").id;
			var that=this;
			uni.request({
				//url: this.config.webUrl+'/api/mytask/index',
				url: that.$serverUrl + '/index.php/Mobile/index/gettask',
				data: data,
				success: data => {
					//console.log(data.data)
				that.listData=data.data.list
				},
				fail: (data, code) => {
				}
			});
		},
		async ongrzlTap(){
			let data = {};
			data.token = uni.getStorageSync("userInfo").token;
			data.uid = uni.getStorageSync("userInfo").id;
			var that=this;
			uni.request({
				url: that.$serverUrl + '/index.php/Mobile/index/getuser',
				data: data,
				success: res =>{
					if(res.data.code==1){
						this.urerdata=res.data.user
						
					}else{
						this.$api.msg('获取失败');
						this.logining = false;
					}
				},
				fail: (data, code) => {
					//console.log('fail' + JSON.stringify(data));
				}
			});	
		/**	uni.request({
				url: this.config.webUrl+'/api/user/index',
				data: data,
				success: res =>{
					if(res.data.code==1){
						console.log(res.data.data);
						this.urerdata=res.data.data
					}else{
						this.$api.msg(res.data.msg);
						this.logining = false;
					}
				},
				fail: (data, code) => {
					//console.log('fail' + JSON.stringify(data));
				}
			});**/
		
		
		},
		ondoctTap(id){
			uni.navigateTo({
				url: `/pages/doctor/taskinfo?id=${id}`
			})
		},
		upontap(id){
			this.closeDrawer('right')
			id = id.replace(/ /g,'')
			uni.navigateTo({
				url: `/pages/user/task/upnr?id=${id}`
			})
		},
		//选择类型发布
		onzzTap(){
			this.hide();
		},
		show(e) {
			if (e === 'left') {
				this.showLeft = true
			} else {
				this.showRigth = true
			}
		},
		hide() {
			this.showLeft = false
			this.showRigth = false
		},
		upper: function(e) {
		},
		lower: function(e) {
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		closeDrawer(e) {
			if (e === 'left') {
				this.showLeft = false
			} else {
				this.showRigth = false
			}
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			this.show('right')
		}
	}	
	
}
</script>

<style>
/* page {
		background: url(http://www.scgyly.com/images/ybg.svg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
	} */
	.uni-page-head .uni-page-head-ft{
		background: #fff!important;
		border-radius: 20px!important;
	}
	.onzzTapasd{
		width: 48%;
		height: 36px;
		line-height: 36px;
		font-size: 32upx;
		padding: 0upx;
		margin: 10upx 0;
		margin-left: 1%;
		float: left;
		border-radius: 10upx;
		color: #fff;
		background: #f49315!important;
	}
	.onzzTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 100upx;
		border-radius: 60upx;
		background: #f49315!important;
	}
	.onokTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 50upx;
		background: #f17503;
		background: -webkit-linear-gradient(left, #f49315 , #f17503);
		background: -o-linear-gradient(right, #f49315, #f17503);
		background: -moz-linear-gradient(right, #f49315, #f17503);
		background: -webkit-gradient(linear, left top, right top, from(#f49315) , to(#f17503));
		background: -o-linear-gradient(left, #f49315 , #f17503);
		background: linear-gradient(to right, #f49315 , #f17503);
	}
	.addtitleks{
		font-size: 32upx;
		line-height: 44px;
		padding-left: 60upx;
		border-bottom: 1upx solid #e5e5e5;
		position: relative;
		font-weight: bold;
	}
	.addtitleks:after{
		font-family: iconfont;
		position: absolute;
		top: 0px;
		left: 20upx;
		content: '\e6f3';
		font-size: 20px;
		color: #f17503;
	}
	.no-nr{
		width: 100%;
		height: 100upx;
		position: relative;
	}
	.djxis{
		width: 94%;
		margin: 0 auto;
		padding: 20upx 0;
	}
	.gmsx{
		color: #FF5A5F;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.yesun{
		font-size: 40upx;
		color: #FFAC45;
		font-weight: 500;
	}
	.nothing{
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		text-align: center;
	}
	.nothing image{
		width: 60%;
		margin: 0 auto;
	}
	.icon-you{
		color: #999;
	}
	.fbboxs{
		border-top: 20upx solid #eee;
		border-bottom: 20upx solid #eee;
		padding: 20upx 3%;
		box-sizing: border-box;
	}
	.bsk2 text{
		background: #FFB400;
		padding: 8upx 40upx;
		color: #111;
		border-radius: 60upx;
		font-size: 28upx;
	}
	.bsk2 text:active{
		background: #FFAC45;
	}
	.bsk2 text:last-child{
		margin-left: 20upx;
	}
.topmain{
	width: 94%;
	margin: 0 auto;
}	
.tsis{
	padding-left: 20upx;
}
.tsis>view:nth-child(1){
	font-size: 16px;
	font-weight: bold;
	color: #111;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	
}
.tsis>view:nth-child(2) text{
	color: #fff;
	background: #FFAC45;
	font-size: 24upx;
	border-radius: 60upx;
	padding: 4upx 20upx;
}
.tsis>view:nth-child(2) text:active{
	background: #BEBEBE;
}
.ytse text:nth-child(2){
	margin-left: 10upx;
}
.mas1{
		background: #FFAC45;
		font-size: 20upx;
		color: #fff;
		margin-right: 20upx;
	}
.spts>view:nth-child(1){
	color: #333;
}
.spts>view:nth-child(2){
	color: #FF5A5F;
}
.spts>view:nth-child(2):active{
	color: #FF1919;
}
.tximg{
	width: 55px!important;
	height: 55px!important;
	border-radius: 50%;
	overflow: hidden;
}	
.content{
	/* padding-top: 30upx; */
	box-sizing: border-box;
}
.msis{
	color: #999;
}
.qqys{
	font-size: 36upx;
	color: #F17503;
	font-weight: 500;
}
.imgbxo{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
}
.imgbxonr{
	flex:1;
}
.wdyf-nr{
	flex:7;
}
.imgbxonr image{
	width: 32px!important;
	height: 32px!important;
	border-radius: 50%;
	overflow: hidden;
}
.wdyf-list{
	width: 96%;
	overflow:hidden;
	margin: 20upx auto;
	border-radius: 6upx;
	background: #fff;
	padding: 30upx;
	box-sizing: border-box;
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
}
.wdyf-lista{
	background: #fff;
}
.titles1{
	background: #f0f0f0;
	color: #999;
	font-size: 24upx;
	border-radius: 5px;
	padding: 1px 2px;
}
.titles2{
	background: #f0f0f0;
	color: #999;
	font-size: 24upx;
	border-radius: 5px;
	padding: 1px 2px;
	margin-left: 10upx;
}
.titles3{
	color: #333;
	font-size: 28upx;
	font-weight: bold;
	margin-left: 10upx;
}
.titles4{
	color: #F17503;
	font-size: 24upx;
	margin-left: 10upx;
	float: right;
	padding: 0px 1px;
	border: 1px solid #F17503;
	border-radius: 5px;
}
.titles{
	padding-top: 10upx;
	padding-bottom: 10upx;
	box-sizing: border-box;
	text-align: justify;
	text-align-last: left;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
</style>
